<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					   【文本和图片垂直居中（对齐）效果】
					   对齐分为四种：基线对齐、顶部对齐
					                居中对齐、底部对齐
					元素种类：块元素、行元素、行内块元素
					块元素特点：独占一行、设置宽高
					行元素特点：一行内显示、不可以设置宽高
					网页：元素之间嵌套生成
					行元素与块元素可以任意嵌套
					前提：设置宽高---行套块
					                块套块 √
									块套行 √
					前提：一行内显示---行套块 √
									  块套块 ×
									  块套行 √
									  行套行 √
									
		 
		 -->
		 <style>
			.k1{vertical-align: baseline;}
			
			.k2{vertical-align: top;}
			
			.k3{vertical-align: middle;}
			
			.k4{vertical-align: bottom;}
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字：图片叫什么名字
		                    文字后加img，设定宽高：25~100px
							基线对齐、顶部对齐
							居中对齐、底部对齐
		 -->
		<h1>文本与图片的垂直属性</h1>
		<p>桃<img class="k1" src="img/桃.jpg" alt="桃" width="100px" height="100px">基线对齐</p>
		<p>红<img class="k2" src="img/OIP.jpg" alt="红" width="100px" height="100px">顶部对齐</p>
		<p>木<img class="k3" src="img/OIP-C.jpg" alt="木" width="100px" height="100px">居中对齐</p>
		<p>桃1<img class="k4" src="img/download.jpg" alt="桃1" width="100px" height="100px">底部对齐</p>
		
	</body>
</html>